<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>公司管理</el-breadcrumb-item>
		</el-breadcrumb>


		<el-form ref="form" :model="company" label-width="80px">
			<el-form-item label="公司名称">
				<el-input v-model="company.name"></el-input>
			</el-form-item>
			<el-form-item label="公司地址">
				<el-input v-model="company.address"></el-input>
			</el-form-item>
			<el-form-item label="公司电话">
				<el-input v-model="company.telephone"></el-input>
			</el-form-item>
			<el-form-item label="公司邮箱">
				<el-input v-model="company.email"></el-input>
			</el-form-item>
			<el-form-item label="公司简介">
				<el-input type="textarea" v-model="company.simplyIntroduce"></el-input>
			</el-form-item>
			<el-form-item label="公司图片" label-width="80px">

				<el-upload action="http://121.41.0.164:8888/sfzy/upload" list-type="picture-card"
					:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
					:on-remove="handleRemove" :file-list="fileList">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>


			<el-form-item label="公司二维码" label-width="80px">

				<el-upload action="http://121.41.0.164:8888/sfzy/upload" list-type="picture-card"
					:on-success="handleSuccess2" :limit="1" :on-preview="handlePictureCardPreview2"
					:on-remove="handleRemove2" :file-list="fileList2">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible2">
					<img width="100%" :src="dialogImageUrl2" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即修改</el-button>
				<el-button @click="fz()">查看图片</el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				company: {
					id: '',
					name: '',
					address: '',
					telephone: '',
					simplyIntroduce: '',
					email: '',
					code: '',
					img: ''
				},
				fileList: [],
				dialogImageUrl: '', // 预览图片路径
				dialogVisible: false, // 预览图片的对话框
				fileList2: [],
				dialogImageUrl2: '', // 预览图片路径
				dialogVisible2: false, // 预览图片的对话框
			}
		},
		methods: {
			onSubmit() {
				this.$http.put('Company', this.company)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('修改成功')
							this.getCompany()
						} else {
							this.$message.error('提交失败')
						}
					})
			},
			fz() {
				this.fileList = [{
					name: this.company.img,
					url: 'http://121.41.0.164:8888/sfzy/downLoad?filename=' + this.company.img
				}];
				this.fileList2 = [{
					name: this.company.code,
					url: 'http://121.41.0.164:8888/sfzy/downLoad?filename=' + this.company.code
				}];
			},
			// 预览图片事件
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
			},
			// 删除图片的事件
			handleRemove(file, fileList) {
				// 移除数据
				this.company.img = '';
			},
			// 处理上传成功的函数
			handleSuccess(response) {
				// 把上传后的图片路径，交给文章对象的tabularChart
				this.company.img = response.message;
			},


			// 预览图片事件
			handlePictureCardPreview2(file) {
				this.dialogImageUrl2 = file.url;
			},
			// 删除图片的事件
			handleRemove2(file, fileList2) {
				// 移除数据
				this.company.code = '';
			},
			// 处理上传成功的函数
			handleSuccess2(response) {
				// 把上传后的图片路径，交给文章对象的tabularChart
				this.company.code = response.message;
			},
			getCompany() {
				this.$http.get('Company/find')
					.then(res => {
						this.company = res.data
					})
			}

		},
		mounted() {
			this.getCompany()

		}
	}
</script>

<style>
</style>